<template>
  <div
    class="progress-bar   mt_sm"
  >

    <div class="progress align-items_center justify_between">
      <div>张三</div>
      <div class="t_center">
        时长
        <div>00:32:00</div>
      </div>
      <div>100%</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'ProgressBar',
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const width = computed(() => {
      return `${props.value}%`;
    })

    return { width };
  }
});
</script>

<style lang="scss" scoped>
$width: v-bind('width');;

.progress-bar {
  background: #e3e3e3;
  border-radius: 16px;
  .progress {
    padding: 8px 16px;
    border-radius: 16px;
    width: $width;
    background: linear-gradient(
      90deg,
      rgba(79, 189, 214, 1) 0%,
      rgba(144, 245, 135, 1) 100%
    );
    color: #fff;
  }
}
</style>
